<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="add options of timepicker explain with each demo of feature">
    <meta name="keywords" content="timepicki, timepicker, time, jquery, plugins">
    <meta name="author" content="senthil2rajan">

    <title>TimePicki - use options in jQuery timepicker</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/timepicki.css" rel="stylesheet">
  </head>

  <body>

    <div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">TimePicki v2.0</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="features.html">Features</a></li>
		  <li><a href="howtouse.html">How to use</a></li>
		  <li class="active"><a href="options.html">Options</a></li>
                  <li><a href="contact.html">Contact</a></li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="inner cover height500">
            <h1 class="cover-heading">Options</h1>
	    <div class="text-left">
            	<h3>Increase Decrease direction:</h3>
		<p>set increase hour or minute direction using increase_direction as 'down' or 'up', default is 'down'.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker1').timepicki({increase_direction:'up'}); 
&lt;/script&gt;</pre>
		<input id="timepicker1" type="text" name="timepicker1"/>
	    </div>
	    <div class="text-left">
            	<h3>Minimum hour:</h3>
		<p>set minimum hour which means we can set minimum value of hour for project requirement, default is 1.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker2').timepicki({min_hour_value:4}); 
&lt;/script&gt;</pre>
		<input id="timepicker2" type="text" name="timepicker2"/>
	    </div>
	    <div class="text-left">
            	<h3>Maximum hour:</h3>
		<p>also can set maximum hour same like minimum hour, default is 12.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker3').timepicki({max_hour_value:8}); 
&lt;/script&gt;</pre>
		<input id="timepicker3" type="text" name="timepicker3"/>
	    </div>
	    <div class="text-left">
            	<h3>Add custom class</h3>
		<p>add custom class name in timepicki for our own like css purpose.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker4').timepicki({custom_classes:"myclass"});
&lt;/script&gt;</pre>
		<input id="timepicker4" type="text" name="timepicker4"/>
                <p>for example here i added myclass for timepicki, then set color:#5CB85C for .myclass class's child inputs.</p>
	    </div>
		<div class="text-left">
        <h3>Don't use Meridian (AM/PM) indication</h3>
		<p>with this option you can choose to hide the AM/PM selector. Ideal if you want a 24 hour clock.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker5').timepicki({show_meridian:false});
&lt;/script&gt;</pre>
		<input id="timepicker5" type="text" name="timepicker5"/>
	    </div>
		<div class="text-left">
		<h3>Set step size hour and minutes</h3>
		<p>with this option you can choose the step size with which minutes and hours have to increase or decrease.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker6').timepicki({
		step_size_hours:2,
		step_size_minutes:15});
&lt;/script&gt;</pre>
		<input id="timepicker6" type="text" name="timepicker6"/>
		<p>here the minutes are changed per quarter instead of per minute, and the hours will be changed per two.</p>
	    </div>
		<div class="text-left">
		<h3>Overflow minutes to hour counter</h3>
		<p>with this option you can choose that hours will be updated if we go over the maximum/minimum of the minutes counter. Changed step size for minutes as well for illustrative purposes.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker7').timepicki({
		overflow_minutes:true,
		step_size_minutes:15});
&lt;/script&gt;</pre>
		<input id="timepicker7" type="text" name="timepicker7"/>
	    </div>
		<div class="text-left">
		<h3>Indicate start time</h3>
		<p>set the start time</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker8').timepicki({start_time: ["06", "00", "AM"]});
&lt;/script&gt;</pre>
		<input id="timepicker8" type="text" name="timepicker8"/>
	    </div>
		<div class="text-left">
		<h3>Disable Keyboard for Mobile</h3>
		<p>prevent keyboard to show up on mobile, side effect: you can't type your hour on desktop keyboard anymore either. Altering hours and minutes with arrows is still possible. So could become default option.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker9').timepicki({disable_keyboard_mobile: true});
&lt;/script&gt;</pre>
		<input id="timepicker9" type="text" name="timepicker9"/>
	    </div>
	    <div class="text-left">
		<h3>Reset</h3>
		<p>if want to reset time in input, to enable reset option</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker10').timepicki({reset: true});
&lt;/script&gt;</pre>
		<input id="timepicker10" type="text" name="timepicker10"/>
	    </div>
		<div class="text-left">
		<h3>Full 24-Hour example</h3>
		<p>more elaborate example of 24 Hour clock.</p>
		<pre>&lt;script type='text/javascript'&gt;
	$('#timepicker11').timepicki({
		show_meridian:false,
		min_hour_value:0,
		max_hour_value:23,
		step_size_minutes:15,
		overflow_minutes:true,
		increase_direction:'up',
		disable_keyboard_mobile: true});
&lt;/script&gt;</pre>
		<input id="timepicker11" type="text" name="timepicker11"/>
	    </div>
            <p class="lead text-right">
              <a href="contact.html" class="btn btn-sm btn-success">Any queries?</a>
              <a href="https://github.com/senthilraj/TimePicki" class="btn btn-sm btn-success">Download</a>
            </p>
          </div>

          <div class="mastfoot">
            <div class="inner">
              <p>Copyrights <a href="https://github.com/senthilraj/TimePicki">@Timepicki</a>, by <a href="https://twitter.com/senthil2rajan">@senthil2rajan</a>.</p>
            </div>
          </div>

        </div>

      </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/timepicki.js"></script>
    <script>
	$('#timepicker1').timepicki({increase_direction:'up'});
	$('#timepicker2').timepicki({min_hour_value:4});
	$('#timepicker3').timepicki({max_hour_value:8}); 
	$('#timepicker4').timepicki({custom_classes:"myclass"});
	$('#timepicker5').timepicki({show_meridian:false});
	$('#timepicker6').timepicki({
		step_size_hours:2,
		step_size_minutes:15});
	$('#timepicker7').timepicki({
		overflow_minutes:true,
		step_size_minutes:15});
	$('#timepicker8').timepicki({start_time: ["06", "00", "AM"]});
	$('#timepicker9').timepicki({disable_keyboard_mobile: true});
	$('#timepicker10').timepicki({reset:true});
	$('#timepicker11').timepicki({
		show_meridian:false,
		min_hour_value:0,
		max_hour_value:23,
		step_size_minutes:15,
		overflow_minutes:true,
		increase_direction:'up',
		disable_keyboard_mobile: true});
	</script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

